<template>
  <view class="card tn-padding-sm tn-margin-sm">
<!--    -->
    <juanzongPdf style="position: absolute;top: -999999px" ref="PDF" :jsonData="jsonData" @upload="pdfUpload"></juanzongPdf>
    <inputForm v-model="form" ref="form" :list="list">
      <template v-slot:anyou>
        <view>{{ form.anyou }}</view>
      </template>
      <template v-slot:happentime>
        <view>{{ form.happentime }}</view>
      </template>
      <template v-slot:name>
        <view>{{ form.name }}</view>
      </template>
      <template v-slot:juannei>
        <view class="tn-flex">
          <tn-form-item label="卷内共：" prop="jNum" class="tn-none-border-bottom" style="padding:0;">
            <tn-input input-align="center" type="number" v-model="form.jNum"/>
            件
          </tn-form-item>
          <tn-form-item label="" prop="yNum" class="tn-none-border-bottom" style="padding:0;">
            <tn-input input-align="center" type="number" v-model="form.yNum"/>
            页
          </tn-form-item>
        </view>
      </template>

    </inputForm>

    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button  v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
      </tn-button>
    </view>

    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">卷宗卷皮</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('卷宗卷皮')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import {
  addAjjz,
  getAjjzDetail,
} from "../../../api/lupeiwenshu";
import inputForm from "../../../components/inputForm.vue";
import dayjs from "dayjs";
import customParseFormat from 'dayjs/plugin/customParseFormat' // ES 2015
import juanzongPdf from './juanzongPdf.vue'
import pdfMixins from "../js/mixins";
import {toast} from "@/utils/common";
dayjs.extend(customParseFormat)
export default {
  components: {inputForm,juanzongPdf},
  mixins: [pdfMixins],
  data() {
    return {
      form: {
        "docId": '',
        "caseNo": "",

        "locatedo": "",
        "gdDate": "",
        "keepTime": "30",
        "jNum": "",
        "yNum": "",
        "extra": "",
        "closeTime": ""
      },
      list: [
        // {
        //   label: "案由：",
        //   prop: "anyou",
        //   type: "slot",
        // },
        {
          label: "当事人：",
          prop: "extra",
        },
        // {
        //   label: "发案时间：",
        //   prop: "happentime",
        //   type: "slot",
        // },
        {
          label: "发案地点：",
          prop: "locatedo",
        },
        // {
        //   label: "办案人：",
        //   prop: "name",
        //   type: "slot",
        // },
        {
          label: "结案日期：",
          prop: "closeTime",
          type: "date",
        },
        {
          label: "归档日期：",
          prop: "gdDate",
          type: "date",
        },
        {
          label: "保管期限：",
          prop: "keepTime",
          unit: "年",
        },
        {
          label: "",
          prop: "juannei",
          type: "slot",
        },
        {
          label: "案卷编号：",
          prop: "caseNo",
        }
      ]
    };
  },
  methods: {
    init() {
      getAjjzDetail({
        docId: this.$route.query.id,
      }).then((res) => {
        const json = res.data;
        this.form = json;
        this.form.extra = json.clientName;
        this.form.locatedo = json.locate;
        this.form.caseNo = json?.dossier.caseNo;
        this.form.keepTime = json.keepTime ||  "30";
        this.form.closeTime = json.closeTime && dayjs(json.closeTime, 'YYYY年MM月DD日').format('YYYY-MM-DD');
        this.form.gdDate = json?.dossier?.gdDate&& dayjs(json.dossier.gdDate, 'YYYY年MM月DD日').format('YYYY-MM-DD');
        this.form.jNum = json?.dossier?.jNum;
        this.form.yNum = json?.dossier?.yNum;

        this.jsonData = json;
      });
    },
    submit() {
      if (this.$route.query.id) {
        const data = {
          "docId": this.$route.query.id,
          "caseNo": this.form?.caseNo,

          "locatedo": this.form?.locatedo,
          "gdDate": this.form?.gdDate && this.form?.gdDate+' 00:00:00',
          "keepTime": this.form?.keepTime,
          "jNum": this.form?.jNum,
          "yNum": this.form?.yNum,
          "extra": this.form?.extra,
          "clientName": this.form?.extra,
          "closeTime": this.form?.closeTime && this.form?.closeTime+' 00:00:00',
        };
        addAjjz(data).then((res) => {
			toast(res.msg)
			setTimeout(() => {
			  uni.navigateBack();
			}, 1500)
        });
      }else {
        console.log('无ID')
      }
    },
  },
  mounted(option) {
    if (this.$route.query.id) {
      this.init()
    }
  },
};
</script>
<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}
</style>
